<template>
    <div>
        <div class="header">
            <el-form :model="searchForm" inline>
                <el-form-item label="用户名称">
                    <el-input placeholder="请输入用户名进行查询" v-model="searchForm.account"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleSearch">查询</el-button>
                </el-form-item>
            </el-form>
            <el-button @click="showAddAcount">新增</el-button>
        </div>
        <el-table :data="tableData" style="width:100%">
            <el-table-column prop="account" label="用户名" />
            <el-table-column prop="level" label="等级" />
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button size="small" @click="updateAccount(row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="deleteAccount(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogVisible" :title="dialogTitle" @close="resetAccountDialog">
            <el-form :model="accountForm" label-width="120px">
                <el-form-item label="用户名称">
                    <el-input placeholder="请输入用户名称" v-model="accountForm.account"></el-input>
                </el-form-item>
                <el-form-item label="等级">
                    <el-input placeholder="请输入用户等级" v-model="accountForm.level"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="restAccountDialog">取消</el-button>
                    <el-button type="primary" @click="addAccount" v-if="dialogType === dialogTypeMap.add">确认</el-button>
                    <el-button type="primary" @click="updateAccountHandle" v-else>确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, computed, getCurrentInstance } from 'vue';

import { getDataApi, addAccountApi, deleteAccountApi, updateAccountApi } from '../utils/mockServer/db.js'

//定义常量
const DEFFAULTLEVEL = 1
const DIALOGTITLEMAP = {
    0: '新增',
    1: '修改'
}
const { proxy: _this } = getCurrentInstance()
//列表数据
const tableData = ref([])
//搜索表单
const searchForm = ref({
    account: ''
})
//新增/修改时的表单
const accountForm = ref({
    account: '',
    level: DEFFAULTLEVEL,
    id: 0
})
//新增弹框
const dialogVisible = ref(false)
//弹出弹框
const dialogTypeMap = ref({
    add: 0,
    modify: 1
})
//弹框类型Map
const dialogType = ref(dialogTypeMap.value.add)
//弹框标语
const dialogTitle = computed(() => {
    return DIALOGTITLEMAP[dialogType]
})
//请求全部数据
const getData = (account) => {
    tableData.value = getDataApi({ account })
}

getData()

//搜索操作
const handleSearch = () => {
    getData(searchForm.value.account)
}
//显示弹框,并切换弹框类型为新增
const showAddAcount = () => {
    dialogVisible.value = true
    dialogType.value = dialogTypeMap.value.add
}
const addAccount = () => {
    //获得弹框中的数据
    const { account, level } = accountForm.value
    const accountObj = {
        account,
        level
    }
    //调用接口
    addAccountApi(accountObj)
    _this.$message({
        type: 'success',
        message: '添加成功',
    })


    getData()
    restAccountDialog()
}


const updateAccount = (row) => {
    //展示弹框并切换弹框内容
    dialogVisible.value = true
    dialogType.value = dialogTypeMap.value.modify

    //将修改的内容显示到输入框中
    const { account, level, id } = row
    accountForm.value.account = account
    accountForm.value, level = level
    accountForm.value.id = id
}
const updateAccountHandle = () => {
    updateAccountApi(accountForm.value)

    _this.$message({
        type: 'success',
        message: '更新成功',
    })
    getData()
    resetAccountDialog()
}

const deleteAccount = (row) => {
    _this.$confirm('是否要删除该账号', '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: "warning",
        }
    )
        .then(() => {
            deleteAccountApi(row)
            _this.$message({
                type: 'success',
                message: '删除成功',
            })
            getData()
        }, () => {
            _this.$message({
                type: 'info',
                message: '取消删除',
            })
        })
}
//复位弹框状态以及弹框内form表单状态
const resetAccountDialog = () => {
    dialogVisible.value = false
    accountForm.value.account = ''
    accountForm.value.level = DEFFAULTLEVEL
}
</script>

<style scoped>
.header {
    display: flex;
    justify-content: space-between;
}
</style>